import React from "react";
import { Box } from "$components";
import "./style.less";

const IPOverview = () => {
  // 假数据
  const data = {
    appliedCount: 27750,
    grantedCount: 3195,
    tradedCount: 57005,
  };
  const unit = '元'
  return (
    <Box title="知识产权缴费情况">
      <div className="ip-overview-container">
        <div className="ip-overview-left-container">
          <img
            src="/assets/img/left-top.png"
            alt=""
            className="ip-overview-left-img"
          />
        </div>
        <div className="ip-overview-right-container">
          <div className="ip-overview-right-top ip-overview-text">
            <div className="ip-overview-dashed-line"></div>
            <span className="ip-overview-text-title">专利申请费已缴纳</span>
            <span className="ip-overview-text-value">{data.appliedCount}{unit}</span>
          </div>
          <div className="ip-overview-right-center ip-overview-text">
            <div className="ip-overview-dashed-line"></div>
            <span className="ip-overview-text-title">专利首年年费已累积缴纳</span>
            <span className="ip-overview-text-value">{data.grantedCount}{unit}</span>
          </div>
          <div className="ip-overview-right-bottom ip-overview-text">
            <div className="ip-overview-dashed-line ip-overview-dashed-line-bottom"></div>
            <span className="ip-overview-text-title">专利有权续交费用已累积缴纳</span>
            <span className="ip-overview-text-value">{data.tradedCount}{unit}</span>
          </div>
        </div>
      </div>
    </Box>
  );
};

export default IPOverview;
